import React, { FC, ReactElement, useState, useEffect, useRef } from 'react'
import { Form } from 'antd'
import style from './index.less'
import commonStyle from '@/pages/publicStyle'
import StepForm from '@/components/StepForm'
import StepOne from './StepOne'
import StepTwo from './StepTwo'
import moment from 'moment'
import { dataFormat2 } from '@/untils/dictionaries'
import { dataFormat1 } from '../../../../untils/dictionaries'

const StepFormExp: FC = (): ReactElement => {
  const stepFormRef = useRef({
    setFormFields: Function,
  })
  const [stepCurrent, setStepCurrent] = useState(0)
  const [formData, setFormData] = useState({
    projectNo: '',
    projectName: '',
    Area: [],
    projectAddress: '',
    projectLeader: '',
    startTime: '',
    projectCycle: ['', ''],
    projectPhoto: '',
    projectMoney: '',
    projectDescription: '',
    serviceContent: '',
    serviceType: '',
    enclosure: [],
  })
  const disabledFieldList: string[] = [
    'startTime',
    'projectCycle',
    'projectPhoto',
    'enclosure',
  ]
  const saveFormDataOnField = (changedFields: { field: any; value: any }[]) => {
    const actionData = JSON.parse(JSON.stringify(formData))
    changedFields.forEach((item: any) => {
      if (item.field === 'startTime') {
        actionData[item.field] = item.value
          ? item.value.format(dataFormat1)
          : ''
      } else if (item.field === 'projectCycle') {
        if (item.value)
          actionData[item.field] = item.value.map((item: any) => {
            if (item) return item.format(dataFormat2)
            else return ''
          })
      } else if (item.field === 'projectPhoto') {
      } else {
        actionData[item.field] = item.value || ''
      }
    })
    setFormData(actionData)
  }
  const stepChangeMy = (stepNo: number) => {
    setStepCurrent(stepNo)
    if (stepNo === 1) {
      const initFormData: any = {
        startTime: formData.startTime
          ? moment(formData.startTime, dataFormat1)
          : undefined,
        projectCycle: [
          formData.projectCycle[0]
            ? moment(formData.projectCycle[0], dataFormat2)
            : undefined,
          formData.projectCycle[1]
            ? moment(formData.projectCycle[1], dataFormat2)
            : undefined,
        ],
      }
      stepFormRef.current?.setFormFields(initFormData)
    }
  }
  const initFormCustom = [
    () => {
      console.log('自定义更新方法，步骤一')
    },
    () => {
      console.log('自定义更新方法，步骤二')
    },
  ]
  useEffect(() => {}, [])
  const { pt20, pb20 } = commonStyle
  const { successResultBox } = style
  const { projectNo, projectName, Area, projectAddress } = formData
  return (
    <StepForm
      ref={(ref: any) => {
        stepFormRef.current = ref
      }}
      stepCurrent={stepCurrent}
      formData={formData}
      disabledFieldList={disabledFieldList}
      onStepChange={(stepNo: number) => {
        stepChangeMy(stepNo)
      }}
      saveFormDataOnField={saveFormDataOnField}
      initFormCustom={initFormCustom}
      cancelCallback={() => {
        console.log('已保存至草稿')
      }}
    >
      {stepCurrent === 0 ? (
        <StepOne></StepOne>
      ) : stepCurrent === 1 ? (
        <StepTwo
          formData={formData}
          saveImgUrl={imgUrl => {
            setFormData({ ...formData, projectPhoto: imgUrl })
          }}
        ></StepTwo>
      ) : (
        <div className={successResultBox} style={{ ...pt20, ...pb20 }}>
          <Form.Item label="项目编号">
            <span className="ant-form-text">{projectNo}</span>
          </Form.Item>
          <Form.Item label="项目名称">
            <span className="ant-form-text">{projectName}</span>
          </Form.Item>
          <Form.Item label="项目地区">
            <span className="ant-form-text">{Area}</span>
          </Form.Item>
          <Form.Item label="项目地址">
            <span className="ant-form-text">{projectAddress}</span>
          </Form.Item>
          {/* <div className={comTypeNameBox} style={mt20}>
          <Button
            type="link"
            onClick={() => {
              setComShowName('stepForm');
            }}
          >
            分步表单
          </Button>
        </div> */}
        </div>
      )}
    </StepForm>
  )
}
export default StepFormExp
